<template>
  <div class='wap' ref='wap'>
    <!-- 顶部 begin -->
    <div class='banner'>
      <img class='bannerImg' src='../../../static/images/lottery/lottery.png' alt=''>
      <div class='prizeInfoBtn' @click='lotteryRecord'>
        <img class='prizeInfoBtnImg' src='../../../static/images/lottery/record.png' alt=''>
      </div>
      <!-- <div class='announcement'>
        <img class='announcementImg' src='../../../static/images/lottery/horn.png' alt=''>
        <swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
          <block v-for="(item, index) in phoneList" :key="index">
            <swiper-item>
              <view class="swiper_item">{{item.phoneNum}}</view>
            </swiper-item>
          </block>
        </swiper>
      </div> -->
      <div class='lotteryCount' hidden>
        <img class='triangleImg' src='../../../static/images/lottery/triangle.png' alt=''>
        <span>您还有 <span class='count'>{{remainingTimes}}</span> 次抽奖机会</span>
      </div>
    </div>
    <!-- 顶部 end -->

    <!-- 抽奖 begin -->
    <div class='box'>
      <div :class="{active: item.isActive}" v-for="(item, index) in prizeList" :key='index' :style="{background: index == 4 ? 'none': ''}">
        <img class="click" src='../../../static/images/lottery/click.png' v-if='index == 4' @click="startLottery" />
        <img src='../../../static/images/lottery/thanks.png' v-else-if='index == 8' />
        <img :src='item.main_image' v-else />
      </div>
    </div>
    <!-- 抽奖 end -->

    <div class='activityRule'>
      <div><span @click="navToActivityRule">活动规则 ></span></div>
    </div>

    <!-- 中奖弹窗 begin -->
    <div class="mask" catchtouchmove='ture' v-if="showMask">
      <div class="mask-content">
        <img class="mask-succ" src="../../../static/images/lottery/win.png" alt="">
        <img class="mask-succ-bg" src="../../../static/images/lottery/sun.png" alt="">
        <div class="mask-content-text">
          <div class="text1">恭喜获得</div>
          <div class="text2">{{luck_good_name}}</div>
          <div class="text3">可到 中奖纪录 查看</div>
          <div class="text4"><span @click="closeMask">立即领取</span></div>
        </div>
      </div>
    </div>
    <!-- 中奖弹窗 end -->

  </div>
</template>

<script>
export default {
  data () {
    return {
      prizeList: [], // 奖项列表
      remainingTimes: '', // 剩余抽奖次数
      prizeIndex: 0, // 选中框位置
      clickFlag: true, // 点击事件，防止重复点击
      timer1: '',
      timer2: '',
      selected: '', // 期望选中的结果，从1开始顺时针的位置
      showMask: false,
      openid: '',
      winner: false,
      luck_good_id: '',
      luck_good_name: '',
      phoneList: [
        {
          phoneNum: '12312451215'
        },
        {
          phoneNum: '65321347378'
        }
      ]
    }
  },
  mounted () {
    this.openid = wx.getStorageSync('openid')
    this.get()
  },

  methods: {
    /**
     * 加载页面抽奖数据
     */
    get () {
      this.$http.get('/api/v1/goods?cls=cj').then((res) => {
        console.log('数据', res)
        // 抽奖按钮
        res.data.data.splice(4, 0, {})
        // 谢谢惠顾
        res.data.data.splice(9, 0, { isActive: true })

        this.prizeList = res.data.data
      })
    },

    /**
     * 开始抽奖
     */
    startLottery () {
      this.winner = false
      this.$http.post('/api/v1/luck', {
        body: {
          openid: this.openid
        }
      }).then(res => {
        console.log('抽奖结果', res)
        if (res.data.code === '0') {
          this.remainingTimes = 1
          const data = res.data.data
          if (data.winner) {
            this.winner = true
            this.luck_good_id = data.luck_good_id
            this.luck_good_name = data.luck_good_name
            let luckIndex
            let luckNum
            for (let index in this.prizeList) {
              if (this.prizeList[index].good_id === this.luck_good_id) {
                luckIndex = index
                break
              }
            }

            switch (luckIndex) {
              case '0':
                luckNum = 1
                break
              case '1':
                luckNum = 2
                break
              case '2':
                luckNum = 3
                break
              case '3':
                luckNum = 8
                break
              case '5':
                luckNum = 4
                break
              case '6':
                luckNum = 7
                break
              case '7':
                luckNum = 6
                break
              case '8':
                luckNum = 5
                break
            }
            console.log('>>>>>>>>>>>', luckNum)
            this.start(luckNum)
          } else {
            this.start(5)
          }
        } else {
          this.remainingTimes = 0
          wx.showModal({
            content: res.data.message,
            showCancel: false
          })
        }
      })
    },

    /**
     * 开始抽奖
     */
    start (selected) {
      console.log('开始抽奖')
      // 设置选项都没有选中
      this.prizeList.forEach((item) => {
        this.$set(item, 'isActive', false)
      })
      if (this.remainingTimes > 0) {
        if (this.clickFlag) {
          this.remainingTimes--
          this.clickFlag = false
          this.timer1 = setInterval(this.move, 100)

          setTimeout(() => {
            this.selected = selected
            clearInterval(this.timer1)
            this.lowSpeed()
          }, 2700)
        }
      } else {
        wx.showModal({
          content: '您无可用抽奖次数了哦~',
          showCancel: false
        })
      }
    },

    /**
     * 将选中的活动移动到下一个
     */
    move () {
      switch (this.prizeIndex) {
        case 0:
          this.prizeList[3].isActive = false
          this.prizeList[this.prizeIndex].isActive = true
          break
        case 3:
          this.prizeList[2].isActive = false
          this.prizeList[5].isActive = true
          break
        case 4:
          this.prizeList[5].isActive = false
          this.prizeList[8].isActive = true
          break
        case 5:
          this.prizeList[8].isActive = false
          this.prizeList[7].isActive = true
          break
        case 6:
          this.prizeList[7].isActive = false
          this.prizeList[6].isActive = true
          break
        case 7:
          this.prizeList[6].isActive = false
          this.prizeList[3].isActive = true
          break
        case 8:
          this.prizeIndex = 0
          this.prizeList[3].isActive = false
          this.prizeList[this.prizeIndex].isActive = true
          break
        default:
          this.prizeList[this.prizeIndex - 1].isActive = false
          this.prizeList[this.prizeIndex].isActive = true
      }

      this.prizeIndex++

      if (this.selected && this.prizeIndex === this.selected) {
        clearInterval(this.timer1)
        clearInterval(this.timer2)
        this.stop()
      }
    },

    /**
     * 降低速度
     */
    lowSpeed () {
      this.clickFlage = false// 不能点击
      this.timer2 = setInterval(this.move, 300)
    },

    /**
     * 停止
     */
    stop () {
      this.clickFlage = false// 不能点击
      this.showPrizeInfo() // 弹出是否中奖
    },

    /**
     * 展示获奖信息
     */
    showPrizeInfo () {
      this.clickFlag = true
      this.selected = ''
      this.prizeIndex = 0
      setTimeout(() => {
        if (this.winner) {
          this.showMask = true
        } else {
          wx.showModal({
            content: '很遗憾没有中奖，下次再来试试运气吧！',
            showCancel: false
          })
        }
      }, 800)
    },

    closeMask () {
      this.showMask = false
      setTimeout(() => {
        wx.showModal({
          content: '领取成功！',
          showCancel: false
        })
      }, 800)
    },

    /**
     * 跳转到活动规则页面
     */
    navToActivityRule () {
      wx.navigateTo({
        url: '../lotteryRule/main'
      })
    },
    lotteryRecord () {
      wx.navigateTo({
        url: '../lotteryRecorder/main'
      })
    }
  }
}
</script>

<style scoped>
.wap {
  background: #a41a23;
}

.wap .banner {
  width: 100%;
  position: relative;
  text-align: center;
}

.wap .banner .bannerImg {
  width: 739rpx;
  height: 549rpx;
}

.wap .banner .prizeInfoBtn {
  width: 207rpx;
  height: 186rpx;
  position: absolute;
  top: 0;
  right: 0;
}
.wap .banner .prizeInfoBtnImg {
  width: 207rpx;
  height: 186rpx;
  position: absolute;
  top: 0;
  right: 0;
}

.wap .banner .announcement {
  position: absolute;
  top: 30rpx;
  left: 190rpx;
  font-size: 24rpx;
  color: #fff;
  padding: 16rpx 30rpx;
  background: #d59397;
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.wap .banner .announcementImg {
  height: 19rpx;
  width: 15rpx;
  margin-right: 20rpx;
}

.wap .banner .lotteryCount {
  position: absolute;
  bottom: 20rpx;
  left: 30rpx;
  font-size: 24rpx;
  color: #fff;
}

.triangleImg {
  height: 16rpx;
  width: 14rpx;
  margin-right: 20rpx;
}

.wap .banner .lotteryCount .count {
  color: #fbcd37;
  font-size: 38rpx;
}

/* 抽奖模块 */
.box {
  margin: -10rpx auto 0 auto;
  width: 732rpx;
  height: 612rpx;
  padding: 35rpx;
  border-radius: 20rpx;
  box-sizing: border-box;
  position: relative;
  background: #de303b;
}

.box div {
  background-size: 100%;
  float: left;
  width: 205rpx;
  height: 164rpx;
  margin-right: 25rpx;
  margin-bottom: 25rpx;
  border-radius: 20rpx;
  position: relative;
  box-sizing: border-box;
  background: #fff;
}

.box .active {
  background: url("");
  background-size: 100% 100%;
}

.box div:nth-child(3n) {
  margin-right: 0;
}

.box div:nth-child(7),
.box div:nth-child(8),
.box div:nth-child(9) {
  margin-bottom: 0;
}

.box .click {
  width: 170rpx !important;
  height: 170rpx !important;
}

.box div img {
  width: 170rpx;
  height: 140rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.activityRule {
  /* padding: 30rpx; */
}

.activityRule div {
  margin: 40rpx auto 130rpx auto;
  text-align: center;
}

.activityRule div span {
  padding: 20rpx 60rpx;
  border: 1px solid #fff;
  border-radius: 20rpx;
  background: #d0202c;
  color: #fff;
  font-size: 30rpx;
}

.mask {
  display: block;
  float: right;
  width: 750rpx;
  height: 100%;
  z-index: 12;
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
}

.mask-content {
  text-align: center;
  position: relative;
  top: 240rpx;
  animation: mymove 0.2s 1;
}

@keyframes mymove {
  from {
    transform: scale(0); /*开始为原始大小*/
  }
  to {
    transform: scale(1); /*放大1.1倍*/
  }
}

.mask-content .mask-succ {
  height: 257rpx;
  width: 499rpx;
  z-index: 3;
  position: relative;
  top: 0;
}

.mask-content .mask-succ-bg {
  height: 632rpx;
  width: 633rpx;
  position: relative;
  top: -330rpx;
  z-index: 1;

  animation: rotating 10s linear infinite;
}
@keyframes rotating {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

.mask-content-text {
  line-height: 1.6;
  position: relative;
  top: -330rpx;
  z-index: 2;
  background: #ef1715;
  margin: -415rpx 170rpx 0 170rpx;
  padding: 100rpx 20rpx 80rpx 20rpx;
  border-radius: 30rpx;
  box-shadow: 0 0 220rpx rgba(247, 136, 121, 0.6);
  color: #fff;
}
.mask-content-text .text1 {
  font-size: 44rpx;
  font-weight: bold;
}

.mask-content-text .text2 {
  font-size: 38rpx;
  font-weight: bold;
}

.mask-content-text .text3 {
  font-size: 32rpx;
  padding: 30rpx 0 70rpx;
}

.mask-content-text .text4 span {
  font-size: 38rpx;
  padding: 20rpx 90rpx;
  font-weight: bold;
  background: #ffed1f;
  border-radius: 100rpx;
  color: #f83a38;
}

.swiper_container {
  height: 35rpx;
  line-height: 35rpx;
  width: 180rpx;
}

.swiper_item {
  font-size: 25rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
}
</style>
<style>
page {
  background: #a41a23;
}
</style>
